import React, { useState, useEffect } from 'react';
import E from 'wangeditor'

let editor = null
function App(props) {
  const [content, setContent] = useState('')

  useEffect(() => {
    // 注：class写法需要在componentDidMount 创建编辑器
    editor = new E("#div1")

    editor.config.onchange = (newHtml) => {
      setContent(newHtml)
    }
    /**一定要创建 */
    editor.create()

    return () => {
      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
      editor.destroy()
    }
  }, [])

  // 获取html方法1
  function getText() {
    props.getText(editor.txt.text())
  }
  function getHTML() {
    props.getHTML(content)
  }
  return (
    <div>
      <div id="div1" onBlur={()=>{getText();getHTML()}}></div>
    </div>
  );
}

export default App;
